<template>
  <div class="menoy">
    <div class="menoy-top">
      <van-icon name="arrow-left" class="goBack" @click="toBack" />
    </div>
    <div class="rules">
      <span>规则</span>
      <van-cell is-link @click="showPopup"></van-cell>
      <van-popup v-model="show" :style="{width:'80%',height:'66%'}">
        <div class="roule">
          <h2>活动规则</h2>
          <ol>
            <li>用户邀请好友注册成为饿了么新用户，好友注册成功7天内完成实付金额超过7元的首单，14天内完成实付金额超过10元的二单，用户可获得最高15元的奖励金。</li>
            <li>用户邀请的好友必须满足饿了么新用户的条件，并且按照第1条的规定通过饿了么APP、支付宝端饿了么外卖,口碑端饿了么或饿了么小程序完成订单，用户才能获得奖励金。</li>
            <li>饿了么新用户是指设备号、手机号、饿了么账户（包含相关第三方平台账户，如场景适用）及支付账户均未在饿了么外卖任何平台上下过单的用户。</li>
            <li>用户邀请的好友是饿了么老用户，在该好友领取店铺红包并使用该红包完成订单，且为该好友在该店铺的首单时，用户可以领取不定额奖励金。</li>
            <li>现金可提现指用户通过完成第1条、第4条取得的奖励金可提现至饿了么钱包。用户可在饿了么APP-推荐有奖-可提现金额中查看具体金额，该奖励金可以提现至饿了么钱包，最低提现门槛为10元。该奖励金可用于用户下单时抵扣应付金额。</li>
            <li>用户的邀请记录最多可保留6个月。</li>
            <li>如发现用户存在任何违规套取奖励金的行为，饿了么将视情节严重程度按照相关规则对用户进行处罚。包括但不限于不予发放奖励金，封停推荐有奖功能，冻结所有通过推荐有奖渠道获得的奖励金，依法追究其法律责任等。</li>
            <li>如有疑问请咨询饿了么客服。</li>
          </ol>
        </div>
      </van-popup>
    </div>
    <!-- <div slot="indicator"></div> -->
    <van-swipe
      :autoplay="3000"
      indicator-color="white"
      style="width:300px;height:35px;color:red;"
      class="my-swipe"
      vertical
      :touchable="false"
    >
      <van-swipe-item style="width:250px; margin-left:40px" class="item">李逍遥 已获得40元现金</van-swipe-item>
      <van-swipe-item style="width:250px; margin-left:40px" class="item">赵灵儿 已获得50元现金</van-swipe-item>
      <van-swipe-item style="width:250px; margin-left:40px" class="item">月茹 已获得60元现金</van-swipe-item>
      <van-swipe-item style="width:250px; margin-left:40px" class="item">雪见 已获得70元现金</van-swipe-item>
      <div class="custom-indicator" slot="indicator"></div>
    </van-swipe>

    <button ubt-click="103200" type="button" class="HomePageApp-Rjabi">立即赚现金</button>
    <a href="JavaScript:;" class="HomePageApp-2CIrY">
      <van-icon name="orders-o" />
      <span>查看赚钱攻略</span>
      <van-cell is-link />
    </a>
    <section class="HomePageApp-3-LjZ">
      <header class="HomePageApp-1f2hY">
        <h2>奖励进度</h2>
        <div class="HomePageApp-2h1ra">
          <span>进度明细</span>
          <van-cell is-link />
        </div>
      </header>
      <ul class="HomePageApp-1ykC_">
        <li class="HomePageApp-23xmW">
          <h2>
            <span class="HomePageApp-2vbIs">0</span>
            <span>元</span>
          </h2>
          <span class="HomePageApp-2q-3I">待下单</span>
        </li>
        <li class="HomePageApp-23xmW">
          <h2>
            <span class="HomePageApp-2vbIs">0</span>
            <span>元</span>
          </h2>
          <span class="HomePageApp-2q-3I">在路上</span>
        </li>
        <li class="HomePageApp-23xmW">
          <h2>
            <span class="HomePageApp-2vbIs">0</span>
            <span>元</span>
          </h2>
          <span class="HomePageApp-2q-3I">已获得</span>
        </li>
        <li class="HomePageApp-23xmW">
          <h2>
            <span class="HomePageApp-2vbIs">0</span>
            <span>元</span>
          </h2>
          <span class="HomePageApp-2q-3I">已失效</span>
        </li>
      </ul>
    </section>
    <div class="HomePageApp-3KR2U">
      <span>
        可提现金额：
        <strong>0</strong>
        <em>元</em>
      </span>
      <van-cell is-link />
    </div>
    <div class="HomePageApp-1ArC8">
      <span>代理商/BD实名认证</span>
      <van-cell is-link />
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    show: false
  }),
  created() {},
  methods: {
    showPopup() {
      this.show = true;
    },
    toBack() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
.menoy {
  height: 100%;
  overflow: hidden;
  ul,
  ol {
    list-style: none;
  }
  background-image: url(https://img.alicdn.com/tfs/TB1iDdefeL2gK0jSZPhXXahvXXa-750-995.jpg);
  background-size: 100%;
  background-color: rgb(255, 140, 62);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding-top: 117.333333vw;
  width: 100vw;
  background-repeat: no-repeat;
  background-size: 100%;
  .rules {
    position: absolute;
    top: 18.666667vw;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 1.066667vw 0 2.133333vw;
    height: 5.866667vw;
    border-top-left-radius: 2.933333vw;
    border-bottom-left-radius: 2.933333vw;
    background: rgba(0, 0, 0, 0.1);
    color: #fff;
    font-size: 0.32rem;
    .roule {
      // z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 4vw 5.333333vw 5.333333vw;
      min-height: 26.666667vw;
      width: 69.333333vw;
      border-radius: 1.066667vw;
      // background: red;
      color: #000;
      h2 {
        margin: 0.666667vw 0 1.333333vw;
        color: #333;
        font-weight: 700;
        font-size: 1.426667rem;
      }
      ol {
        color: #555;
        list-style-position: inside;
        list-style-type: decimal;
        li {
          margin: 0.6em 0;
          line-height: 3.3em;
        }
      }
    }
  }
  .van-cell {
    // background-color:none;
    padding: 0;
    width: 1.5em;
    background-color: rgba(0, 0, 0, 0);
  }
  .HomePageApp-Rjabi {
    margin-bottom: 4.4vw;
    width: 74.666667vw;
    height: 13.333333vw;
    border-radius: 6.666667vw;
    background-image: linear-gradient(180deg, #fcfac4, #f4d170 41%, #e4b043);
    box-shadow: 0 0.533333vw 1.333333vw 0 rgba(163, 0, 0, 0.5);
    color: #561b04;
    font-weight: 700;
    font-size: 1.48rem;
  }
  .HomePageApp-2CIrY {
    margin-top: 4vw;
    display: flex;
    align-items: center;
    margin-bottom: 6.133333vw;
    color: #ffeca0;
    font-size: 0.9rem;
  }
  .HomePageApp-1ykC_,
  .HomePageApp-23xmW {
    display: flex;
    align-items: center;
  }
  .HomePageApp-3-LjZ {
    overflow: hidden;
    width: 87.2vw;
    border-radius: 0.106667rem;
    border-radius: 1.066667vw;
    background: #fff;
    //头部
    .HomePageApp-1f2hY {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 4.266667vw;
      height: 9.6vw;
      background: #f9f9f9;
      h2 {
        color: #333;
        font-weight: 700;
        font-size: 0.8rem;
      }
      .HomePageApp-2h1ra {
        display: flex;
        align-items: center;
        margin-right: -1.066667vw;
        height: 100%;
        color: #999;
        font-size: 0.32rem;
      }
    }
    //内容
    .HomePageApp-1ykC_ {
      height: 20vw;
      .HomePageApp-23xmW .HomePageApp-2vbIs {
        margin-right: 0.4vw;
        font-size: 1.3rem;
        font-family: CSD;
      }
      .HomePageApp-23xmW {
        flex: 1;
        flex-direction: column;
        h2 {
          display: flex;
          align-items: baseline;
          color: #ff5339;
          font-weight: 700;
          font-size: 0.346667rem;
        }
        .HomePageApp-2q-3I {
          margin-top: 0.266667vw;
          color: #666;
          font-size: 0.293333rem;
        }
      }
    }
  }
  .HomePageApp-3-LjZ,
  .HomePageApp-3KR2U {
    overflow: hidden;
    width: 8.72rem;
    width: 87.2vw;
    border-radius: 1.066667vw;
    background: #fff;
  }
  .HomePageApp-3KR2U {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin: 4.266667vw 0 4.533333vw;
    // padding-left: 4.266667vw;
    height: 16vw;
    line-height: 16vw;
    color: #333;
    font-size: 0.4rem;
    font-weight: 500;
    span {
      margin-left: 4.266667vw;
    }
    em,
    strong {
      color: #ff5339;
      font-style: normal;
      font-family: CSD;
    }
    strong {
      font-size: 0.64rem;
    }
  }
  .HomePageApp-1ArC8 {
    margin-bottom: 6.533333vw;
    font-size: 0.32rem;
    text-align: center;
    color: #ffeca0;
    display: flex;
    align-items: center;
  }
}
.my-swipe {
  margin-left: 50px;
  overflow: hidden;
}
.menoy-top {
  position: fixed;
  top: 0;
  left: 0;
  .goBack {
    width: 3.2vw;
    height: 3.2vw;
    color: #ffffff;
    size: 16px;
    margin-top: 10px;
    margin-left: 10px;
  }
}
</style>